/*
 * @Author: XingTao 362042734@qq.com
 * @Date: 2023-08-30 09:34:17
 * @LastEditors: XingTao 362042734@qq.com
 * @LastEditTime: 2023-08-30 09:42:02
 * @FilePath: \cesium-secdev-set\src\directives\vMove.ts
 * @Description: 拖拽
 */

const vMove = {
  mounted(el, bindings) {
    // 可传入指定拖拽元素的class，不指定则默认为绑定的元素
    let dragDom;

    if (bindings.value) {
      dragDom = el.querySelector(`.${bindings.value}`);
    } else {
      dragDom = el;
    }

    dragDom.onmousedown = (e) => {
      const offX = e.pageX - el.offsetLeft;
      const offY = e.pageY - el.offsetTop;

      document.onmousemove = (e) => {
        el.style.left = e.pageX - offX + 'px';
        el.style.top = e.pageY - offY + 'px';
      };

      document.onmouseup = () => {
        document.onmousemove = null;
        document.onmouseup = null;
      };
    };
  },
};

export default vMove;
